import React, { useEffect, useRef } from 'react'
import { TimelineMax } from 'gsap'

const Rudolph = () => {
  let eyeRightTop = useRef(null)
  let eyeRightBottom = useRef(null)
  let eyeLeftTop = useRef(null)
  let eyeLeftBottom = useRef(null)

  useEffect(() => {
    const tmRightBottom = new TimelineMax()
      .to(eyeRightBottom, 0.2, {
        y: '-30',
      })
      .to(eyeRightBottom, 0.2, {
        y: '0',
      })

    const tmLeftBottom = new TimelineMax()
      .to(eyeLeftBottom, 0.2, {
        y: '-30',
      })
      .to(eyeLeftBottom, 0.2, {
        y: '0',
      })

    const tmLeftTop = new TimelineMax()
      .to(eyeLeftTop, 0.2, {
        height: '52',
      })
      .to(eyeLeftTop, 0.1, {
        height: '13',
      })

    const tmRightTop = new TimelineMax({
      onComplete: () => {
        setTimeout(() => {
          tmRightTop.play(0)
          tmRightBottom.play(0)
          tmLeftTop.play(0)
          tmLeftBottom.play(0)
        }, 2000)
      },
    })
      .to(eyeRightTop, 0.2, {
        height: 52,
      })
      .to(eyeRightTop, 0.1, {
        height: 13,
      })
  }, [eyeRightTop, eyeRightBottom, eyeLeftTop, eyeLeftBottom])

  return (
    <svg x='0px' y='0px' className='rudolph' viewBox='0 0 573 681'>
      <circle className='st0' cx='299.5' cy='413.5' r='218.9' />
      <g>
        <g>
          <path
            className='st1'
            d='M424.5,238.4c110.4-68.5,49.6-176,15.8-221.7c-5.7-7.8-16.7-9.4-24.5-3.7c-2.2,1.6-4,3.8-5.3,6.3L308.1,224.7
    			L424.5,238.4z'
          />
          <path
            className='st2'
            d='M131.9,280.3C6.7,245.4,34.9,125.2,54.6,71.9C58,62.8,68,58.1,77.1,61.5c2.6,1,4.9,2.5,6.8,4.5l155.9,168.4
    			L131.9,280.3z'
          />
          <path
            className='st3'
            d='M467.8,427.1c-4.1-24.3-12.2-43.6-22.9-58.8c-5.3-7.7-11.6-14.6-18.6-20.8l8.9-67c7-52.8-22.8-100-67.2-119.7
    			c-15.9-10.3-35.5-17.4-57.2-20.4c-16.4-2.2-33.1-2.1-49.5,0.2c-40.9,5.8-75.5,24.5-96.8,49.2c-37.1,31.3-52.5,85-31,133.7
    			l27.3,61.9l0,0c-10,15.9-16.1,33.9-17.9,52.6c-0.1,1-0.2,2-0.3,3c-0.3,4-0.5,8.2-0.5,12.4c0,2.1,0,4.3,0.1,6.5
    			c0.2,4.4,0.5,8.9,1.1,13.6c0.2,1.4,0.4,2.8,0.6,4.2C156.7,565.7,244,598.2,325,586.6C407.2,574.8,483,517.7,467.8,427.1z'
          />
          <path
            className='st4'
            d='M467.8,427.1c-6.2-37-21.9-62.4-41.5-79.7l-3.5,26.2l-0.7,5.5c-2.1,13.5-9.6,49.1-33.1,78.6
    			c-16.4,20.6-40.6,38.3-76.2,43.4s-63.8-5.1-85.3-20.3c-30.9-21.8-48-53.9-53.8-66.2l-2.3-5.1l-10.6-24.2
    			c-14,22.1-21.9,50.8-17.5,88.1c10.7,91.2,99.5,124.9,181.8,113.1C407.2,574.8,483,517.7,467.8,427.1z'
          />
          <path
            className='st2'
            d='M367.9,160.7c-27.4-17.7-65.8-25.9-106.7-20.1s-75.5,24.5-96.8,49.2c-37.1,31.3-52.5,85-31,133.7l27.3,61.8
    			l10.6,24.2l2.3,5.1c5.8,12.4,23,44.5,53.8,66.2c21.5,15.2,49.7,25.4,85.3,20.3s59.8-22.7,76.2-43.4c23.5-29.5,31-65.2,33.1-78.6
    			l0.7-5.5l0,0l3.5-26.2l8.9-67C442.1,227.6,412.3,180.4,367.9,160.7z'
          />
          <path
            className='st5'
            d='M227.4,480.9c-30.9-21.8-48.1-53.9-53.8-66.2l-2.3-5.1l-10.6-24.2c-14,22.1-21.9,50.8-17.5,88.1
    			c10.7,91.2,99.5,124.9,181.8,113.1l-12.2-85.4C277.1,506.3,249,496.1,227.4,480.9z'
          />
          <path
            className='st6'
            d='M467.8,427.1c-6.2-37-21.9-62.4-41.5-79.7l-3.5,26.2l-0.7,5.5c-2.1,13.5-9.6,49.1-33.1,78.6
    			c-16.4,20.6-40.6,38.3-76.2,43.4l0,0l12.2,85.4C407.2,574.8,483,517.7,467.8,427.1z'
          />
          <path
            className='st1'
            d='M164.4,189.8c-37.1,31.3-52.5,85-31,133.7l27.3,61.8l10.6,24.2l2.3,5.1c5.8,12.4,23,44.5,53.8,66.2
    			c-5.5-22.2,3.6-48,28.5-58.9c13.9-6.1,28.6-10.3,43.7-12.4l-38.4-269C220.4,146.4,185.8,165.1,164.4,189.8z'
          />
          <path
            className='st2'
            d='M367.9,160.7c-27.4-17.7-65.8-25.9-106.7-20.1l38.4,269c15.1-2.2,30.3-2.3,45.4-0.3c27,3.5,43,25.7,43.9,48.5
    			c23.5-29.5,31-65.2,33.1-78.6l0.7-5.5l0,0l3.5-26.2l8.9-67C442.1,227.6,412.3,180.4,367.9,160.7z'
          />
          <path
            className='st7'
            d='M345,409.3c-30.3-3.9-61.1,0.5-89.1,12.7c-24.9,10.9-34.1,36.7-28.5,58.9c21.5,15.2,49.7,25.4,85.3,20.3
    			s59.8-22.7,76.2-43.4C388,435,372.1,412.8,345,409.3z'
          />
          <path
            className='st8'
            d='M345,409.3c-15.1-2-30.4-1.8-45.4,0.3l0,0l13.1,91.6l0,0c35.6-5.1,59.8-22.7,76.2-43.4
    			C388,435,372.1,412.8,345,409.3z'
          />
          <path
            className='st7'
            d='M256,422c-24.9,10.9-34.1,36.7-28.5,58.9c21.5,15.2,49.7,25.4,85.3,20.3l-13.1-91.6
    			C284.6,411.7,269.9,415.9,256,422z'
          />
          <path
            className='st1'
            d='M422.1,379.2c0.5-3.5,0.7-5.5,0.7-5.5L422.1,379.2z'
          />
          <path
            className='st1'
            d='M173.6,414.7l-2.3-5.1C171.3,409.6,172.1,411.4,173.6,414.7z'
          />
          <ellipse
            transform='matrix(0.9899 -0.1414 0.1414 0.9899 -44.192 33.421)'
            className='st9'
            cx='213'
            cy='327.6'
            rx='30.3'
            ry='30.3'
          />
          <circle className='st9' cx='359.9' cy='306.6' r='30.3' />
          <circle className='st6' cx='300.1' cy='412.8' r='30.7' />
          <path
            className='st10'
            d='M207.6,170.9c-24.3-21.4-31.1-56.4-33-78c-0.9-11.1-9.9-19.9-21-20.6l-0.1,0c-10.5-0.6-19.6,7.4-20.2,17.9
    			c-0.1,0.8,0,1.7,0,2.5c0.8,11.4,2.5,22.7,5,33.9c1.2,5.2,2.5,10.2,3.8,15.1c-0.4-0.3-0.8-0.6-1.1-0.8c-8-6.2-19.1-6.6-27.6-1.1
    			l0,0c-9.8,6.6-10.3,20.4-1.1,28.3c6.7,5.9,14.5,10.6,22.9,13.7c3.7,1.4,7.6,2.4,11.5,3l1.7,0.3c7.1,1,13.5,4.5,18.1,9.9
    			c2.5,3,5.2,5.7,8.1,8.3c9.6,8.4,24.2,7.4,32.6-2.2c1-1.2,2-2.5,2.8-3.9l1.5-2.7C215.9,186.7,214.3,176.9,207.6,170.9z'
          />
          <path
            className='st10'
            d='M321.1,154.7c17.3-27.3,14.1-62.8,9.8-84.2c-2.2-10.9,3.9-21.8,14.4-25.6l0.1,0c9.9-3.6,20.9,1.6,24.4,11.5
    			c0.3,0.8,0.5,1.6,0.7,2.4c2.5,11.2,4,22.5,4.7,33.9c0.3,5.3,0.5,10.5,0.6,15.6c0.3-0.4,0.6-0.8,0.8-1.1c6-8.2,16.5-11.7,26.2-8.8
    			l0,0c11.2,3.6,15.6,16.7,9,26.9c-4.8,7.6-10.9,14.2-18.1,19.6c-3.2,2.4-6.6,4.4-10.2,6.2l-1.6,0.7c-6.5,2.9-11.7,8.1-14.6,14.6
    			c-1.6,3.5-3.4,7-5.5,10.2c-6.9,10.8-21.2,13.9-32,7c-1.3-0.9-2.6-1.9-3.7-3l-2.2-2.2C317.6,172.1,316.4,162.3,321.1,154.7z'
          />
        </g>
      </g>
      <circle className='st11' cx='213.4' cy='315.6' r='7' />
      <circle className='st11' cx='350' cy='296.1' r='7' />
      <circle className='st11' cx='305.8' cy='403.5' r='7' />
      <g>
        <rect
          ref={element => {
            eyeRightBottom = element
          }}
          x='316'
          y='342'
          className='st12'
          width='88'
          height='30'
        />
        <rect
          ref={element => {
            eyeRightTop = element
          }}
          x='316'
          y='260'
          className='st12'
          width='88'
          height='13'
        />
      </g>
      <g>
        <rect
          ref={element => {
            eyeLeftBottom = element
          }}
          x='168'
          y='361'
          className='st13'
          width='88'
          height='30'
        />
        <rect
          ref={element => {
            eyeLeftTop = element
          }}
          x='168'
          y='280'
          className='st13'
          width='88'
          height='13'
        />
      </g>
    </svg>
  )
}

export default Rudolph
